<template>
  <view>
    <uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="10px" @close="close">
      <view style="height: 999rpx;overflow: hidden;">
        <!-- 标题 -->
        <view class="flex-center" style="margin: 30rpx 0 20rpx;font-weight: bold;font-size: 28rpx;">请选择地址</view>
        <!-- 省市区标题 -->
        <view class="" style="padding: 0 30rpx;display: flex;margin-bottom: 5rpx;">
          <view v-for="(m,i) in 3" :key="i" @click="currentIndex = i">
            <view 
              v-if="areaNameList[i]"
              class="address-title" 
              :style="{'borderColor': currentIndex == i ? 'red' : 'transparent'}"
            >
              {{areaNameList[i]}}
            </view>
          </view>
        </view>
        <!-- 内容区 -->
        <view style="max-height: 850rpx;overflow: auto;">
          <view 
            :style="{color: m.isSelected ? 'red' : 'black'}" 
            style="margin: 10rpx 30rpx;padding: 25rpx 0;border-bottom: 1rpx solid #00000010;display: flex;align-items: center;line-height: 28rpx;font-size: 28rpx;" 
            v-for="(m,i) in currentList" 
            :key="i" 
            @click="didSelectedItem(m)"
          >
            {{ m.name }}
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
// import UniPopup from '../uni-popup/uni-popup.vue';
import provinceData from './city.js';
export default {
  // components: {
  //   UniPopup,
  // },
  data() {
    return {
      // 当前选中的省市区index 省0市1县/区2
      currentIndex: -1,
      // 存放省市区/县名称的数组
      areaNameList: ['请选择', '', ''],
      // 省数组
      provinceLst: [],
      // 市数组
      cityList: [],
      // 县/区数组
      countyList: [],
    };
  },
  computed: {
    currentList() {
      return this.currentIndex == 0 ? this.provinceList : (this.currentIndex == 1 ? this.cityList : this.countyList)
    }
  },
  mounted() {
    this.initProviceData()
  },
  methods: {
    open() {
      this.$refs.popup.open()
    },
    close() {
      this.$refs.popup.close()
    },
    initProviceData() {
      this.provinceList = provinceData.filter( m => m.type == 0).sort((a,b)=>a.first_letter.localeCompare(b.first_letter))
			this.currentIndex = 0
    },
    didSelectedItem(m) {
      if (m.type == 0) {
        this.$set(this.areaNameList,0,m.name)
        this.$set(this.areaNameList,1,'请选择')
        if (this.areaNameList[1]) {
					this.$set(this.areaNameList,2,'')
					this.cityList.forEach(m => m.isSelected = false)
					this.countyList.forEach(m => m.isSelected = false)
        }
        this.provinceList.forEach(value => value.isSelected = m.name == value.name)
        this.cityList = provinceData.filter(obj => obj.type == 1 && obj.parent_code == m.code)
      }else if (m.type == 1) {
        this.$set(this.areaNameList,1,m.name)
				this.$set(this.areaNameList,2,'请选择')
				if (this.areaNameList[2]) {
					this.countyList.forEach(m => m.isSelected = false)
				}
        this.cityList.forEach(value => value.isSelected = m.name == value.name)
        this.countyList = provinceData.filter(obj => obj.type == 2 && obj.parent_code == m.code)
      }else if (m.type == 2) {
        this.countyList.forEach(value => value.isSelected = m.name == value.name)
        this.$set(this.areaNameList,2,m.name)
      }
      if (this.currentIndex == 2) {
        let arr = this.areaNameList.filter(m => m != '' && m != '请选择')
        if (arr.length == 3) {
          this.$emit('area-select',arr.join(' '))
          this.close()
        }
      }
      if (this.currentIndex >= 2) return
      this.currentIndex++
    },
		getActiveObj(list) {
			return	list.filter(obj => obj.isSelected)
		}
  },
}
</script>

<style lang="scss" scoped>
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.address-title {
  margin-right: 30rpx;
  position: relative;
  font-size: 28rpx; 
  padding-bottom: 5rpx;
  background-color: white;
  border-bottom: 4rpx solid transparent;
}
</style>